<template>
  <div id="info">
    <divider>个人信息</divider>
    <div style="text-align: center;">
      <qrcode :value="value" :fg-color="fgColor"></qrcode>
    </div>
  </div>
</template>

<script>
import { Divider, Card, Group, Cell, CellBox, Qrcode } from 'vux'
import { getAuthInfo } from '../utils/common'
import VueSocketio from 'vue-socket.io'
import Vue from 'vue'
Vue.use(VueSocketio, 'http://192.168.1.135:3000')

export default {
  components: {
    Card,
    Divider,
    Group,
    Cell,
    CellBox,
    Qrcode
  },
  data () {
    return {
      value: 'https://vux.li',
      fgColor: '#6eb3d5'
    }
  },
  sockets: {
    connect: function () {
      console.log('socket connected')
    },
    customEmit: function (val) {
      this.value = val.info
      this.fgColor = val.color
    }
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted () {
    setInterval(() => {
      this.clickButton('00')
      console.log(this.fgColor)
    }, 5000)
  },
  methods: {
    clickButton: function (val) {
      console.log('socket emit')
      this.$socket.emit('message', val)
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
</style>
